display: none、visibility: hidden与opacity: 0的区别

2024-02-23 10:05| 来源: 网络整理| 查看: 265

文章目录 1. display: none、visibility: hidden与opacity: 0的区别2. 补充：其他隐藏元素的方法

1. display: none、visibility: hidden与opacity: 0的区别

display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表：

特性（行为）display: nonevisibility: hiddenopacity: 0在渲染树中否是是占据空间否是是可点击否否是子节点可修改否是否transition无效无效有效性能导致回流，性能消耗大导致重绘，性能消耗较小导致重绘，性能消耗较小

表格的解读：

display:none其实很好理解，只要记住设置该属性的元素并不会出现在渲染树中这一点就行了，那么其他的一些特性（行为）想想也知道了：肯定不占据页面空间、不可点击、子节点也不可修改、transition无效，这些其实都是废话，皮之不存，毛将焉附？ display:none属性的添加或去除，相当于在渲染树中增加或删除节点，这对整体页面的结构造成了巨大的影响，结构变了，那肯定得重新计算尺寸、然后再绘制，性能消耗当然大咯~visibility: hidden只是将元素隐藏了而已，设置该属性的元素还是会出现在渲染树中，其子元素可以通过设置 visibility: visible显示出来。 visibility属性并不会改变页面元素的结构和尺寸，所以只需重新绘制一下即可，性能消耗较小。opacity: 0只是让元素的透明度变0，它还是存在于渲染树中，并且占据中间、可点击触发事件。 opacity也不对元素的结构和尺寸造成影响，所以只需重新绘制一下即可，性能消耗也较小。 2. 补充：其他隐藏元素的方法设置position属性值为fixed(absolute、relative)并设置足够大负距离left、top使其“隐藏”；用层叠关系z-index将元素置于最底层；设置hight: 0，同时overflow: hidden；text-indent: -9999px使文字隐藏。

本文参考整理自：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

【本文地址】

公司简介

联系我们